1
00:00:00,140 --> 00:00:00,680
Okay.

2
00:00:00,680 --> 00:00:04,010
Let's go ahead and talk about scrolling frames.

3
00:00:04,010 --> 00:00:10,250
This is a neat GUI object that allows us, as the name suggests, to scroll through it.

4
00:00:10,250 --> 00:00:13,940
So let's go ahead and add a scrolling frame into our GUI.

5
00:00:13,940 --> 00:00:19,280
And it's literally just a regular frame with some extra features to allow us to scroll through it.

6
00:00:19,280 --> 00:00:22,130
And you can see that there's a scrolling bar right here.

7
00:00:22,130 --> 00:00:25,190
So we have all these standard properties that a normal frame would have.

8
00:00:25,190 --> 00:00:28,970
And then we have some additional properties specifically for scrolling.

9
00:00:29,300 --> 00:00:32,750
Now we have some properties here such as automatic canvas size.

10
00:00:32,750 --> 00:00:38,480
These image properties relate to the scrolling bar itself, so you can set an image for the middle of

11
00:00:38,480 --> 00:00:40,790
the scrolling bar at the bottom and the top.

12
00:00:40,790 --> 00:00:44,330
That's what those properties are for, and we're not going to worry about those for now.

13
00:00:44,330 --> 00:00:51,320
But the main thing we want to kind of focus on is the canvas size, which represents the entire size

14
00:00:51,320 --> 00:00:54,050
of this scrolling thing.

15
00:00:54,050 --> 00:01:00,350
So basically right now the canvas size is set to two, which is two times or twice the size of this

16
00:01:00,350 --> 00:01:01,190
frame currently.

17
00:01:01,190 --> 00:01:06,650
So you can imagine basically two of these frames doubled up inside of here that we're able to scroll

18
00:01:06,650 --> 00:01:07,250
through.

19
00:01:08,910 --> 00:01:12,960
And we can grab the scrolling bar to scroll up and down.

20
00:01:12,960 --> 00:01:16,440
It's also moving the GUI at the same time, which is a little funky, but you can see the scrolling

21
00:01:16,440 --> 00:01:19,830
bar moving and down here currently defines that.

22
00:01:19,830 --> 00:01:21,120
The scale is set to two.

23
00:01:21,150 --> 00:01:27,330
If we set it to zero, which means there is currently no canvas size, as you can see, there is no

24
00:01:27,330 --> 00:01:28,020
scrolling bar.

25
00:01:28,020 --> 00:01:33,780
If I set it to one, well, that's going to be an additional size here that we can scroll through.

26
00:01:33,780 --> 00:01:35,820
And of course you can define it as offset as well.

27
00:01:35,820 --> 00:01:38,940
But most of the time people have it defined as scale.

28
00:01:39,480 --> 00:01:45,540
We are also able to change the thickness of the scrolling bar down here with the scroll bar thickness

29
00:01:45,540 --> 00:01:46,200
property.

30
00:01:46,200 --> 00:01:49,980
It's in pixels, so if I want my scroll bar to be thinner, I can set it to eight.

31
00:01:49,980 --> 00:01:52,950
So now it's eight pixels and width.

32
00:01:52,950 --> 00:01:58,530
And then we're also able to define if we can scroll in both the x and y direction.

33
00:01:58,530 --> 00:02:02,340
So right now it's set to yes we can scroll in both the x and y direction.

34
00:02:02,340 --> 00:02:04,950
But currently the x is set to zero.

35
00:02:04,950 --> 00:02:06,930
So there's no scroll bar on the bottom.

36
00:02:06,930 --> 00:02:11,820
But if I set the scale to two now we have a scroll bar on both the top and the bottom.

37
00:02:11,820 --> 00:02:14,760
So we can scroll this way and we can scroll this way.

38
00:02:15,310 --> 00:02:21,400
These other properties, called horizontal scroll bar, inset and vertical scroll bar inset, determines

39
00:02:21,400 --> 00:02:25,660
if we would like to account for the size of our scrolling bars.

40
00:02:25,660 --> 00:02:31,720
So since the size of them is eight pixels, if we were to set this to always, then that means we're

41
00:02:31,720 --> 00:02:37,330
going to account for an eight pixel inset, because that's what the size of our scrolling bars are.

42
00:02:37,330 --> 00:02:43,870
If we set it to scroll bar, that means that inset is only going to exist when a scroll bar appears,

43
00:02:43,870 --> 00:02:50,080
and the way that you can get a scrolling frame to resize itself as more and more elements are placed

44
00:02:50,080 --> 00:02:54,220
inside of it, is by using the property automatic canvas size.

45
00:02:54,220 --> 00:02:59,320
If you want to create a list of objects that you can scroll downwards in, then you would have this

46
00:02:59,320 --> 00:03:06,790
automatic canvas size set to the y axis, and then by default you would set these properties to zero.

47
00:03:07,330 --> 00:03:11,890
And then let me go ahead and adjust the scrolling direction to be only on the y axis.

48
00:03:12,070 --> 00:03:15,940
And let me go ahead and start adding some objects in here, like another frame.

49
00:03:15,940 --> 00:03:18,520
And let me change the color of this so we can see it.

50
00:03:18,520 --> 00:03:19,990
So there's our green frame.

51
00:03:19,990 --> 00:03:25,810
If I duplicate this and start positioning stuff around inside of the scrolling frame, if I move it

52
00:03:25,810 --> 00:03:26,980
down and around.

53
00:03:28,250 --> 00:03:32,420
And then let me try and reset this to have an automatic canvas size.

54
00:03:32,420 --> 00:03:34,400
And it's currently not working.

55
00:03:34,400 --> 00:03:38,060
And that's likely because we are not using a UI constraint.

56
00:03:38,060 --> 00:03:40,820
We're going to be looking at that in the next lecture.

57
00:03:40,820 --> 00:03:44,450
But let me actually just go ahead and increase the canvas size manually.

58
00:03:44,450 --> 00:03:45,830
So there we go.

59
00:03:45,830 --> 00:03:52,910
As we scroll down, you can see the position of these frames on different areas in our canvas.

60
00:03:52,910 --> 00:03:58,490
So let me go ahead and duplicate that and try to like move it down here if it will let me.

61
00:03:58,490 --> 00:04:03,620
It's being a little bit funky, but as you can see we can adjust the position of these different frame

62
00:04:03,620 --> 00:04:08,450
objects at different points inside of our scrolling frame and as we scroll through.

63
00:04:09,220 --> 00:04:11,140
We can see those different elements.

64
00:04:11,910 --> 00:04:15,240
Now, if we were to set, let me try to find the property.

65
00:04:15,240 --> 00:04:16,800
Clip the sentence to false.

66
00:04:16,800 --> 00:04:23,070
It's going to show all of the objects in the scrolling frame, even when they go beyond the border of

67
00:04:23,070 --> 00:04:24,060
our scrolling frame.

68
00:04:24,060 --> 00:04:27,180
So most of the time, you'll likely have this set to true.

69
00:04:27,180 --> 00:04:32,760
I'm not sure why you would have it set to false, because it looks a little odd, but that is basically

70
00:04:32,760 --> 00:04:34,620
the purpose of the scrolling frame.

71
00:04:34,620 --> 00:04:37,110
It's to store stuff that you can scroll through.

72
00:04:37,110 --> 00:04:42,480
So if you have tons of objects that just wouldn't fit on the screen, normally you can slap it in a

73
00:04:42,480 --> 00:04:47,910
scrolling frame and give the players the ability to scroll through all of those objects.

74
00:04:48,150 --> 00:04:53,490
So now that we have a good idea of what scrolling frames are, we're now going to take a look at UI

75
00:04:53,520 --> 00:04:59,700
constraints and how we can use them to improve the functionality and visual style of our GUI objects.

76
00:04:59,700 --> 00:05:04,830
There are some UI constraints that specifically affect scrolling frames that we want to go ahead and

77
00:05:04,830 --> 00:05:05,940
take a look at.